﻿@{
    Layout = null;

    var pageModel = ViewBag.pageModel as NB.MGJ.Model.AntiFake.AntiFake_PageCreate;
    //var type = ViewBag.type;
    //var code = ViewBag.code;

    var ActionType=ViewBag.ActionType;
}
<script src="~/Scripts/Home/swiper.js"></script>
<script src="~/Scripts/MGJJS/TraceSource/PageOperation/UEditor/ueditor.config.js"></script>
<script src="~/Scripts/MGJJS/TraceSource/PageOperation/UEditor/ueditor.all.js"></script>
<script src="~/Scripts/MGJJS/TraceSource/PageOperation/UEditor/lang/zh-cn/zh-cn.js"></script>

<script src="~/Scripts/MGJJS/TraceSource/PageOperation/jquery.qrcode.min.js"></script>
<script src="~/Content/CommonCss/jqueryUI/jquery-ui.js"></script>
@*<script src="~/Scripts/WebUploader/webuploader.js"></script>
    <link href="~/Scripts/WebUploader/webuploader.css" rel="stylesheet" />*@
<link href="~/Content/HomePage/swiper.min.css" rel="stylesheet" />
<link href="~/Content/CommonCss/jqueryUI/jquery-ui.css" rel="stylesheet" />


@*<script src="~/Scripts/MGJJS/AntiFake/PageSaveRequest.js"></script>*@

@*微页面创建*@
<style>
    .padding15
    {
        padding: 15px 20px;
        background: #F0F4F5;
    }

    p
    {
        margin: 0;
    }

    .picker input[type='file']
    {
        opacity: 0;
    }

    .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover
    {
        color: #fff;
        background-color: #50AE55;
        border-color: transparent;
    }

    .myTabs.nav-tabs > li.active > a, .myTabs.nav-tabs > li.active > a:focus, .myTabs.nav-tabs > li.active > a:hover
    {
        color: #50AE55;
        cursor: default;
        background-color: #fff;
        border-bottom: 4px solid #ddd;
        border-bottom-color: #50AE55;
    }

    .con
    {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding: 15px 10px;
        background: white;
    }

    .con .left-con
    {
        width: 350px;
        min-height: 650px;
        background: url('/Content/webImgs/Market/redPacket/phone.png');
        background-size: 100% 100%;
        position: relative;
        box-shadow: 3px 0 10px #a29a9a;
        border-radius: 6px;
    }

    .con .left-con #phone
    {
        width: 92.7%;
        height: 78%;
        position: absolute;
        top: 14.3%;
        left: 3%;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .con .left-con #phone .tab-content
    {
        height: 100%;
        width: 100%;
        position: absolute;
    }

    .con .left-con #phone .tab-content .phoneView
    {
        width: 100%;
        height: 100%;
        position: absolute;
        box-sizing: content-box;
        overflow-y: auto;
    }

    .con .right-con
    {
        flex: 1;
        margin-left: 15px;
        /*background: yellow;*/
        min-height: 500px;
    }

    .pageTitle {

        border: 1px dashed white;
        text-align: center;
        height: 30px;
        line-height: 30px;
        margin: 60px auto;
        width: 80%;
        color: white;
    }

    .draggable:hover
    {
        cursor: move;
    }

    .resizable:hover
    {
        border: dashed 1px #4DA4DF;
        cursor: move;
    }

    .EnterpriseLogo
    {
        position: absolute;
        top: 1%;
        left: 6%;
        width: 40px;
        height: 40px;
        border-radius: 4px;
        z-index: 100;
        display: flex;
        align-items: center;
    }

    #Award-Record
    {
        position: absolute;
        top: 1%;
        right: 3%;
        border: none;
    }

    #Rules
    {
        position: absolute;
        top: 1%;
        right: 30%;
        border: none;
    }

    .title
    {
        position: absolute;
        top: 10%;
        width: 100%;
        height: 140px;
        display: flex;
        justify-content: center;
    }

    .middle
    {
        position: absolute;
        top: 30%;
        width: 100%;
        height: 200px;
    }

    .clickRequest
    {
        position: absolute;
        bottom: 20%;
        left: 10%;
        width: 80%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        background-color: #F9BF26;
        border-radius: 20px;
        color: #763401;
        font-weight: 700;
        border: none;
    }

    .confirm
    {
        position: absolute;
        bottom: 22%;
        height: 60px;
        width: 140px;
        left: 50%;
        margin-left: -70px;
    }

    div.surport
    {
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        height: 20px;
        margin: 0 auto;
        width: 100%;
        display: block;
        text-align: center;
        color: #999;
        border: none;
        font-size: 12px;
        z-index: 9;
        background: #FFF;
    }

    .roasting
    {
        width: 80%;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 5%;
        margin: 0 auto;
        background-color: rgba(255,255,255,0.2);
        border-radius: 4px;
        padding: 5px 0;
        height: 65px;
        color: white;
    }

    .roasting > ul
    {
        margin-bottom: 0;
    }

    .roasting > ul > li
    {
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 12px;
    }

    .roasting > ul > li span:nth-child(1)
    {
        margin-left: 5px;
    }

    .roasting > ul > li span:nth-child(2)
    {
        margin-right: 5px;
        margin-left: 5px;
    }

    .roasting > ul > li span:nth-child(3)
    {
        margin-right: 5px;
    }

    ul.my-award li
    {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #CCCCCC;
        border-bottom: 2px solid #CCCCCC;
        padding: 10px;
    }

    ul.my-award li > div:nth-child(1) > div:nth-child(1)
    {
        color: #444;
    }

    ul.my-award li > div:nth-child(1) > div:nth-child(2)
    {
        color: #999;
    }

    #ChangeImg
    {
        display: none;
    }

    #ModalImg
    {
        height: 80px;
        width: 80px;
        margin: 0 auto;
    }

    .bg-con .insert
    {
        position: absolute;
        width: 72%;
        height: 60%;
        left: 14%;
        top: 20%;
    }

    .bg-con .insert .awardInfo
    {
        position: relative;
        height: 65%;
    }

    .bg-con .insert .awardInfo > img
    {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .bg-con .insert .awardInfo > p
    {
        position: absolute;
        text-align: center;
        bottom: 5px;
        width: 100%;
        color: whitesmoke;
    }

    .bg-con .insert .btn
    {
        background: #F7C331 !important;
        color: #7D3802;
        border: none;
        padding: 4px 12px;
        font-size: 14px;
        line-height: 1.6;
        border-radius: 3px;
        text-align: center;
    }

    .bg-con .insert .btn-block
    {
        display: block;
    }

    .bg-con .insert .rule-title
    {
        text-align: center;
        margin: 10Px 0;
    }

    .bg-con .insert .rule-content
    {
        overflow: auto;
        padding: 0 0 0 8px;
        height: 78%;
    }

    .award-details
    {
        width: 100%;
        height: 100%;
        background: #f2f2f2;
    }

    .award-details .award-head
    {
        background: #CB0101;
        text-align: center;
        color: white;
        padding: 0 0 10px;
    }

        .award-details .award-head p:nth-child(1)
        {
            text-align: left;
        }

    .award-details .award-body
    {
        background: white;
        text-align: center;
        padding: 10px 0;
    }

    .award-details .award-details-list
    {
        display: flex;
        align-items: center;
        padding-bottom: 5px;
        border-bottom: dashed 1px #E0E0E0;
        background: white;
    }

    .award-details .award-details-list span:nth-child(1)
    {
        margin-left: 5px;
    }

    .award-details .award-details-list span:nth-child(2)
    {
        margin-right: 5px;
        margin-left: 5px;
    }

    .award-details .award-details-list span:nth-child(3)
    {
        margin-right: 5px;
    }

    .phone
    {
        width: 100%;
        height: 100%;
        background-image: url("https://15448716.h40.faiusr.com/2/7/ACgIABACGAAgqdaD0QUooc7ujQUw0AU4gAo.jpg");
        background-size: 100% 100%;
        padding: 0 5%;
    }

    .phone > p:nth-child(1)
    {
        color: #E29F7B;
        padding-top: 10px;
        font-size: 18px;
    }

    .phone > p:nth-child(2)
    {
        color: #E29F7B;
        margin: 5px 0 10px;
    }

    .phone .phone-num
    {
        display: flex;
        align-items: center;
        background-color: white;
        border-radius: 3px;
        margin-bottom: 10px;
    }

    .phone .phone-num > span
    {
        padding: 5px;
    }

    .phone .phone-num > input
    {
        border: none;
        height: 100%;
        width: 100%;
        border-radius: 3px;
        height: 30px;
        line-height: 30px;
    }

    .phone .sure
    {
        display: block;
        text-decoration: none;
        background-color: #FFCC00;
        text-align: center;
        height: 35px;
        color: #763401;
        line-height: 35px;
        border-radius: 4px;
        margin: 20px auto;
    }

    .phone .user-info
    {
        border: 1px solid #d7d7d7;
        border-radius: 6px;
        width: 100%;
        height: 100px;
        overflow: hidden;
    }

    .phone .user-info > ul
    {
        margin: 0;
        padding: 0;
    }

    .phone .user-info > ul > li
    {
        display: flex;
        margin: 10px auto 20px;
        align-items: center;
    }

    .phone .user-info > ul > li > img
    {
        width: 35px;
        height: 35px;
        border-radius: 40px;
        margin-left: 10px;
    }

    .phone .user-info > ul > li > span
    {
        color: white;
    }

    .phone .user-info > ul > li > span:nth-child(2)
    {
        width: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .winnerName
    {
        position: absolute;
        bottom: 3%;
        color: #d7d7d7;
        width: 100%;
    }

    .winnerName .winnerCon
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .red-con
    {
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
        position: absolute;
    }

    .bg-con
    {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-color: rgba(0,0,0,.85);
        display: none;
        z-index: 100;
    }

    .bg-con .small-bg
    {
        width: 100%;
        height: 50%;
        position: absolute;
        left: 0;
        /*bottom: -50%;*/
        bottom: 0;
        background: url("https://15448716.h40.faiusr.com/4/7/ACgIABAEGAAguMqQ0QUo0cnLigUw0AU4_AQ.png");
        background-size: 100% 100%;
        z-index: 10;
    }

    .bg-con .small-bg > p:nth-child(1)
    {
        text-align: center;
        color: #FBCE02;
        margin: 10px auto 0;
    }

    .red-con .bg-con .small-bg > p:nth-child(1) > span
    {
        color: #FBCE02;
        font-size: 30px;
        font-weight: 600;
        text-align: center;
    }

    .bg-con .small-bg > p:nth-child(2)
    {
        text-align: center;
        color: whitesmoke;
        font-size: 20px;
    }

    .bg-con .small-bg > p:nth-child(3)
    {
        text-align: center;
        color: whitesmoke;
        font-size: 16px;
    }

    .bg-con .small-bg > a.add
    {
        display: block;
        text-decoration: none;
        width: 80%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        background-color: #FFCC00;
        border-radius: 20px;
        color: #763401;
        font-weight: 700;
        position: absolute;
        bottom: 10px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    #TopSwpier
    {
        height: 175px;
    }

    #TopImg
    {
        display: none;
    }

    #top_img, #TopImg, #TopImg > img
    {
        height: 100%;
    }

    #btn1
    {
        bottom: 0;
        display: none;
    }

    #icon {
        border: 1px dashed white;
        position: relative;
        margin: 15px auto;
        display: flex;
        width:95%;
        justify-content: space-between;
    }

    .IconBox
    {
        margin-top: 2px;
    }

    #icon img
    {
        display: block;
        height: 40px;
        width: 40px;
        margin: 0 auto;
        border-radius:50%;
    }

    #icon span
    {
        display: flex;
        justify-content: center;
        align-content: flex-end;
    }

    .space-between
    {
        display: flex;
        justify-content: space-between;
    }

    .PaddingRow
    {
        padding: 0 25px;
    }

    #phoneForm .row
    {
        margin: 0;
    }

    #AntiFakeInp .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control
    {
        background-color: #FFF;
    }

    /************************文件上传****************************/
    .upload_warp_img_div_del
    {
        position: absolute;
        top: 6px;
        width: 16px;
        right: 4px;
    }

    .upload_warp_img_div_top
    {
        position: absolute;
        top: 0;
        width: 80px;
        height: 30px;
        background-color: rgba(0, 0, 0, 0.4);
        line-height: 30px;
        text-align: left;
        color: #fff;
        font-size: 12px;
        text-indent: 4px;
        z-index: 100;
    }

    .upload_warp_img_div_text
    {
        width: 80px;
        height: 80px;
    }

    .upload_warp_img_div_text > img
    {
        width: 100%;
    }

    .upload_warp_img_div img
    {
        max-width: 100%;
        max-height: 100%;
        vertical-align: middle;
    }

    .upload_warp_img_div
    {
        position: relative;
        height: 80px;
        width: 80px;
        border: 1px solid #ccc;
        margin-right: 10px;
        float: left;
        line-height: 80px;
        display: table-cell;
        text-align: center;
        background-color: #eee;
        cursor: pointer;
    }

    .upload_warp_text
    {
        text-align: left;
        margin-bottom: 10px;
        padding-top: 10px;
        font-size: 14px;
    }

    .upload_warp_right
    {
        float: left;
        width: 80%;
        margin-left: 2%;
        height: 80px;
        line-height: 130px;
        color: #999;
    }

    .upload_warp_left
    {
        width: 80px;
        height: 80px;
        border: 1px dashed #999;
        border-radius: 4px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .upload_warp_left > div:nth-child(2)
    {
        height: 100% !important;
        width: 100% !important;
    }

    .upload_warp_left input
    {
        opacity: 0;
    }

    .upload_warp
    {
        display: flex;
        align-items: center;
    }

    .upload
    {
        background-color: #fff;
    }

    .hello
    {
        text-align: center;
    }

    .rightForm
    {
        border-radius: 4px;
        border: 2px solid #e5e5e5;
        display: none;
    }

    .titleCss
    {
        text-indent: 1em;
        font-size: 20px;
        padding: 10px;
        background: #F5F5F5;
        color: #444;
    }

    .titleX
    {
        color: #999;
        float: right;
        margin-right: 10px;
        cursor: pointer;
    }

    .HoverImg
    {
        background-size: 100% 100% !important;
        background-repeat: no-repeat !important;
    }

    #Icon0list img, #Icon1list img, #Icon2list img, #Icon3list img
    {
        width: 40px;
        height: 40px;
    }

    #DragImg_Web img, #thelist img
    {
        width: 91px;
        height: 91px;
    }

    #DragImgUiBox
    {
        display: block;
        width: 60px;
        position: absolute;
        z-index: 9;
    }

    #DragImgSrc {
        border: 1px dashed white;
        width: 100%;
        height: 100%;
    }


    #ButtonList img
    {
        width: 40px;
        height: 40px;
        border-radius:50%;
    }

    #phone
    {
        background-size: 100% 100%;
    }

    #RichText {
        padding: 2px 30px 20px 30px;
        height: 120px;
        width: 95%;
        overflow-y: auto;
        margin: 20px 10px 30px 10px;
        border: 1px dashed white;
    }

        #RichText img {
            padding: 2px 30px 20px 30px;
            width:90%;
        }
    
    
     #QrCode {
            height: 86px;
            width: 86px;
            background: Red;
        }

    #edui1, #edui1_iframeholder
    {
        width: 100% !important;
    }
</style>

<div class="padding15" id="app">
    <div class="con">
        <div class="left-con">
            <div class="input-hidden-con">
                <input type="hidden" id="DragImgheight" value="@pageModel.DragImgheight" />
                <input type="hidden" id="DragImgwidth" value="@pageModel.DragImgwidth" />
                <input type="hidden" id="DragImgtop" value="@pageModel.DragImgtop" />
                <input type="hidden" id="DragImgleft" value="@pageModel.DragImgleft" />
                <input type="hidden" id="TempletId" value="@pageModel.TempletId"/>
             
            </div>
            <!--标题-->
            <p class="pageTitle"  onclick="ShowTitle()">@pageModel.Title</p>
            <div id="phone">
                <input type="hidden" id="BackgroundSrcInp" value="@pageModel.BackgroundImg" />
                <div class="tab-content">
                    <div id="red1" class="in phoneView red-con" onclick="ChangeBackground()">
                        <div id="TopSwpier" onclick="ShowTopSwpier()">
                            <input type="hidden" id="PicShowType" value="@pageModel.PicShowType" />
                            <!--拖拽图-->
                            <div id="DragImgUiBox" class="ui-widget-content resizable draggable">
                                <img id="DragImgSrc" data-src="@pageModel.DragImgSrc" src="/Content/CommonCss/miniui/themes/ext/images/index_48.jpg" />
                            </div>
                            <!--轮播图-->
                            <div id="top_img" class="swiper-container">
                                <div id="_top_img" class="swiper-wrapper">
                                </div>
                                <div id="btn1" class="swiper-pagination"></div>
                            </div>
                        </div>
                        <!--按钮组-->
                        <div id="icon" onclick="ShowIcon()" class="row"></div>
                        <!--查询框-->
                        <div id="phoneForm" class="PaddingRow" >
                            <div class="row margin-bottom-10">
                                <input style="border: 1px dashed #f96868;" class="form-control" type="text" id="CodeSearch" />
                            </div>
                            @if (pageModel.TempletId == 2)
                            {
                                    <button type="button" class="btn btn-primary" style="width:100%" onclick="">查询</button>
                            }
                            else
                            {
                                    <button type="button" style="background-color: #2ACCA1; width: 100%"  class="btn btn-primary"  onclick="">查询</button>
                            }
                        </div>
                        <!--富文本-->
                        <div id="RichText" onclick="ShowRichText()">
                            @*<div id="RichTextChild">
                        
                            </div>*@
                        </div>
                        <div style="height:20px"></div>
                    </div>
                    <div class="surport">技术支持：码管家云系统&nbsp;版权所有</div>
                </div>
            </div>
        </div>

        <div class="right-con">
            <div class="tab-content" style="margin-top:15px;" id="level2-content">
                <!-----------------------------标题管理-------------------------------------->
                <div id="AntiFakeTitle" class="rightForm" role="tabpanel">
                    <p class="titleCss">标题管理<span class="titleX">×</span></p>
                    <form id="activity_form" class="form-horizontal">
                        <div class="row">
                            <div class="col-xs-2 col-md-2 text-right">
                                标题名称：
                            </div>
                            <div class="col-xs-5 col-md-5">
                                <input type="text" id="Title" class="form-control" name="TitleName" value="@pageModel.Title"  oninput="changeTitleName(this)">
                            </div>
                        </div>
                        <div class="row text-right margin-right-30">
                            <button id="TitleSave" type="button" class="btn btn-primary">保存</button>
                        </div>
                    </form>
                </div>
                <!-----------------------------轮播图/单图管理-------------------------------------->
                <div id="AntiFakeSwiper" class="rightForm" role="tabpanel" style="display:none">
                    <p class="titleCss">组图管理<span class="titleX">×</span></p>
                    <form id="delivery_form" class="form-horizontal">
                        <input type="hidden" id="LbtJson" value="@pageModel.LbtJson" />
                        <div class="row">
                            <div class="col-md-2 text-right">显示方式：</div>
                            <div class="col-md-4">
                                <label for="multipleImg">
                                    <input type="radio" name="swiperShow" value="0" checked="checked">&nbsp;轮播
                                </label>
                                &nbsp;&nbsp;
                                <label for="singleImg">
                                    <input type="radio" name="swiperShow" value="1">&nbsp;产品图片
                                </label>
                                &nbsp;&nbsp;
                            </div>
                        </div>

                        @*轮播*@
                        <div id="SwpieroUpload">
                            <div class="row">
                                <div class="col-md-2 text-right">轮播设置：</div>
                                <div class="col-md-5">
                                    <select class="form-control" id="TimeOptions" name="swpierAutoplay" onchange="swpierAutoplayNum(this)">
                                        <option value="1">1秒</option>
                                        <option value="2">2秒</option>
                                        <option value="3" selected="selected">3秒</option>
                                        <option value="4">4秒</option>
                                        <option value="5">5秒</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">上传图片：</div>
                                <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
                                    <div class="hello">
                                        <div class="upload">
                                            <div class="upload_warp">
                                                <div class="upload_warp_left" id="SwpierImgAdd">
                                                    <img src="~/Content/webImgs/AntiFakePage/upload.png">
                                                </div>
                                                <div class="upload_warp_right">
                                                    <div id="LbtList" class="upload_warp_img">
                                                        @*<div class="upload_warp_img_div">
                                                                <div class="upload_warp_img_div_top">
                                                                    <img src="~/Content/webImgs/AntiFakePage/del.png" class="upload_warp_img_div_del">
                                                                </div>
                                                                <div class="upload_warp_img_div_text">
                                                                    <img src="~/Content/webImgs/TraceSource/OriginsMaterialList/Icon_Gold.png" />
                                                                </div>
                                                            </div>*@
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="upload_warp_text">选中1张文件 图片大小建议：640x320px 最多上传5张</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        @*单图*@
                        <div id="DragUpload">
                            <div class="row">
                                <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">
                                    上传图片：
                                </div>
                                <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
                                    <div class="hello">
                                        <div class="upload">
                                            <div id="DragImg_Web" class="uploader-list" style="display:flex;align-items:center">
                                                <label id="DragImgWebUp" class="HoverImg" style="background: url('/Content/webImgs/upLogo/cp_img_tj.png' );background-size:100% 100%;width:91px;height:91px;border-radius:5px;background-repeat:no-repeat"></label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row text-right margin-right-30">
                            <button id="LunBoTuSave" type="button" class="btn btn-primary">保存</button>
                        </div>
                    </form>
                </div>
                <!-----------------------------按钮列表-------------------------------------->
                <div id="ButtonListWrap" class="rightForm  AntiFakeBtn " style="">
                    <p class="titleCss">按钮管理<span class="titleX">×</span></p>
                    <div class="row text-left margin-left-15">
                        <button type="button" id="AddButton" class="btn btn-primary">添加</button>
                    </div>
                    <ul id="ButtonList">
                        <li class="row">
                            <div class="col-sm-4 border">
                                <img src="/Content/webImgs/TraceSource/Ico/5.png" />
                                <span>防伪</span>
                            </div>
                            <button data-id="10" class="btn btn-primary" onclick="Button.EditModel(this)">修改</button>
                            <button data-id="10" class="btn btn-danger" onclick="Button.DeleteModel(this)">删除</button>
                        </li>
                    </ul>
                </div>


                <!-----------------------------输入框管理-------------------------------------->
                @*<div id="AntiFakeInp" class="rightForm" role="tabpanel">
                    <p class="titleCss">输入框管理<span class="titleX">×</span></p>
                    <form id="inputType" class="tab-content" style="margin-top:10px;">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-sm-2 col-md-2 text-left">
                                    <label>
                                        <input type="radio" name="FWCode" checked onclick="ChangeInput(this)" />单防伪
                                    </label>
                                </div>
                                <div class="col-xs-5 col-md-5">
                                    <input class="form-control" type="text" readonly="readonly" placeholder="防伪码输入框" value=" " />
                                </div>
                            </div>
                        </div>
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-sm-2 col-md-2 text-left">
                                    <label>
                                        <input type="radio" name="FWCode" onclick="ChangeInput(this)" />溯源+防伪
                                    </label>
                                </div>
                                <div class="col-xs-3 col-md-3" style="padding-right:0;">
                                    <input class="form-control" type="text" readonly="readonly" placeholder="溯源码输入框" style="border-bottom-right-radius: 0px !important; border-top-right-radius: 0px !important;">
                                </div>
                                <div class="col-sm-2 col-md-2">
                                    <span style="background: #EEE; text-align: center; padding: 0; border-bottom-right-radius: 4px; border-top-right-radius: 4px; display: flex; align-items: center; justify-content: space-around; line-height: 2.3em;margin-left:-15px;">4位验证码</span>
                                </div>
                            </div>
                        </div>

                        <div class="row text-right margin-right-30">
                            <button type="button" class="btn btn-primary">保存</button>
                        </div>
                    </form>
                </div>*@

                <!-----------------------------背景图管理-------------------------------------->
                <div id="AntiFakeBackground" class="rightForm" role="tabpanel">
                    <p class="titleCss">更换背景<span class="titleX">×</span></p>
                    <form id="activityInfo_form" class="tab-content" style="margin-top:10px;">
                        @*<div class="row">
                            <div class="col-xs-5 col-md-5">
                                <label>
                                    <input type="radio" name="BackgroundInp" value="0" checked onclick="ChangeBackgroundImg(this)">
                                    &nbsp;默认
                                </label>
                                &nbsp;  &nbsp;
                                <label>
                                    <input type="radio" name="BackgroundInp" value="1" onclick="ChangeBackgroundImg(this)">
                                    &nbsp;
                                    上传背景图
                                </label>
                            </div>
                        </div>*@
                        <div class="hello" style="padding-left:15px;" id="BackgroundFile">
                            <div class="upload">
                                <div id="thelist" class="uploader-list" style="display:flex;align-items:center">
                                    <label id="backgroundImg" class="HoverImg" style="background: url('/Content/webImgs/upLogo/cp_img_tj.png' );background-size:100% 100%;width:91px;height:91px;border-radius:5px;background-repeat:no-repeat"></label>
                                    <span>（建议上传350*667px的图片）</span>
                                </div>
                            </div>
                        </div>

                        <div class="row text-right margin-right-30">
                            <button type="button" id="BackgroundImgSave" class="btn btn-primary">保存</button>
                        </div>
                        <input name="BackgroundImg" id="BackgroundImg" value="" style="display:none" />
                    </form>
                </div>
                <!-----------------------------富文本框管理-------------------------------------->
                <div id="RichTextRight" class="rightForm" role="tabpanel">
                    <p class="titleCss">富文本框内容<span class="titleX">×</span></p>
                    <form id="RichTextRight_form" class="tab-content" style="margin-top:10px;">
                        <div class="row">
                            <div id="editor" style="width:100%"></div>
                        </div>
                        <div class="row text-right margin-right-30">
                            <button type="button" id="RichTextSave" class="btn btn-primary">保存</button>
                        </div>

                        <input name="MainContent" id="MainContent" value="@pageModel.MainContent" type="hidden" />

                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<input type="hidden" id="ModuleId" value="@pageModel.ID" />

<script>
    var defaultIconSrc = "/Content/webImgs/TraceSource/OriginsMaterialList/Icon_Gold.png";
    var defaultSwiperSrc = "/Scripts/MGJJS/TraceSource/PageOperation/UEditor/dialogs/image/images/alignicon.jpg";
    var SwpierPlayNum = 3;
    var SwpierDefaultImageHtml = '<img class="swiper-slide SwpierDefaultImage" src="/Scripts/MGJJS/TraceSource/PageOperation/UEditor/dialogs/image/images/alignicon.jpg" />'
    var DragDefaultImageSrc = "/Content/CommonCss/miniui/themes/ext/images/index_48.jpg"

    //Webuploader

    function UpBackground() {
        BackgroundWeb.upload();
    }

    //背景
    BackgroundWeb = WebUploader.create({

        // swf文件路径
        //        swf: BASE_URL + '/js/Uploader.swf',

        // 文件接收服务端。
        server: "Upload/Upload",

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: {
            id: "#backgroundImg",
            multiple: false
        },
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/jpg,image/jpeg,image/png'
        },

        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        compress: false,//不启用压缩
        resize: false,//尺寸不改变
    });
    // 当有文件添加进来的时候
    BackgroundWeb.on('fileQueued', function (file) {

        if (file.size > 500000) {
            alert("图片大小不能超过500KB");
            return;
        }

        var $li = $(
                    '<div  id="' + file.id + '" class="img-thumbnail">' +
                    '<img alt="null" />' +
                    //'<p class="info">' + file.name + '</p>' +
                    '</div>'
                ),
                $img = $li.find('img');

        // $list为容器jQuery实例
        $('#thelist').prepend($li);

        // 创建缩略图
        // 如果为非图片文件，可以不用调用此方法。
        // thumbnailWidth x thumbnailHeight 为 100 x 100
        BackgroundWeb.makeThumb(file, function (error, src) {
            if (error) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }

        }, 91, 91);
        $('#thelist > .img-thumbnail').eq(0).mouseenter(function () {
            var url = $(this).find('img').attr('src');
            $(this).attr('name', url).find('img').attr('src', "/Content/webImgs/upLogo/cp_img_sc.png");
        }).mouseleave(function () {
            var url = $(this).attr('name');
            $(this).find('img').attr('src', url);
        }).click(function () {
            $("#phone").css("background-image", "none")
            BackgroundSrc = "";
            $(this).remove();
            $('#backgroundImg').css('display', 'inline-block');
        });

        $('#backgroundImg').css('display', 'none');
        BackgroundWeb.upload();

        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        BackgroundWeb.on('uploadSuccess', function (file, response) {

            $("#BackgroundImg").val(response._raw.split('。')[1])

            var src = response._raw.substring(response._raw.indexOf("。") + 1)
            $img.attr('src', src);

            $("#phone").css({ "background-image": "url(" + src + ")" })
            BackgroundSrc = src
        });
    });

    // 文件上传失败，显示上传出错。
    BackgroundWeb.on('uploadError', function (file) {
        var $li = $('#' + file.id),
                $error = $li.find('div.error');
        // 避免重复创建
        if (!$error.length) {
            $error = $('<div class="error" style="position: relative"></div>').appendTo($li);
        }
        $error.text('上传失败');
        $error.append($('<span class="glyphicon glyphicon-remove" style="position: absolute;right: 0;color: green;font-size: 18px"></span>'))
    });

    // 完成上传完了，成功或者失败，先删除进度条。
    BackgroundWeb.on('uploadComplete', function (file) {
        $('#' + file.id).find('.progress').remove();
    });



    //拖动图
    dragImgWeb = WebUploader.create({

        // swf文件路径
        //        swf: BASE_URL + '/js/Uploader.swf',

        // 文件接收服务端。
        server: "Upload/Upload",

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: {
            id: "#DragImgWebUp",
            multiple: false
        },
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/jpg,image/jpeg,image/png'
        },

        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        compress: false,//不启用压缩
        resize: false,//尺寸不改变
    });
    // 当有文件添加进来的时候
    dragImgWeb.on('fileQueued', function (file) {

        if (file.size > 500000) {
            alert("图片大小不能超过500KB");
            return;
        }
     
        var $li = $(
                    '<div  id="' + file.id + '" class="img-thumbnail">' +
                    '<img alt="null" />' +
//                        '<p class="info">' + file.name + '</p>' +
                    '</div>'
                ),
                $img = $li.find('img');

        // $list为容器jQuery实例
        $('#DragImg_Web').prepend($li);
        // 创建缩略图
        // 如果为非图片文件，可以不用调用此方法。
        // thumbnailWidth x thumbnailHeight 为 100 x 100
        dragImgWeb.makeThumb(file, function (error, src) {
            if (error) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }
        }, 91, 91);
        $('#DragImg_Web > .img-thumbnail').eq(0).mouseenter(function () {
            var url = $(this).find('img').attr('src');
            $(this).attr('name', url).find('img').attr('src', "/Content/webImgs/upLogo/cp_img_sc.png");
        }).mouseleave(function () {
            var url = $(this).attr('name');
            $(this).find('img').attr('src', url);
        }).click(function () {
            $("#DragImgSrc").attr("src", DragDefaultImageSrc)
            $(this).remove();
            $('#DragImgWebUp').css('display', 'inline-block');
        });

        $('#DragImgWebUp').css('display', 'none');

        dragImgWeb.upload();
        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        dragImgWeb.on('uploadSuccess', function (file, response) {
            var src = response._raw.substring(response._raw.indexOf("。") + 1)
            $('#AntiFakeDragImg form').append(' <input type="hidden" name="DragImgSrc" value="' + response._raw.split('。')[1] + '" />');
            $img.attr('src', src);

            $("#DragImgWebUp").attr("src", src)
            $("#DragImgSrc").attr("src", src)
        });

    });

    // 文件上传失败，显示上传出错。
    dragImgWeb.on('uploadError', function (file) {
        var $li = $('#' + file.id),
                $error = $li.find('div.error');
        // 避免重复创建
        if (!$error.length) {
            $error = $('<div class="error" style="position: relative"></div>').appendTo($li);
        }
        $error.text('上传失败');
        $error.append($('<span class="glyphicon glyphicon-remove" style="position: absolute;right: 0;color: green;font-size: 18px"></span>'))
    });

    // 完成上传完了，成功或者失败，先删除进度条。
    dragImgWeb.on('uploadComplete', function (file) {
        $('#' + file.id).find('.progress').remove();
    });

    //swpier

    mySwiper = new Swiper('#top_img', {
        autoplayDisableOnInteraction: false,
        //width: window.innerWidth,
        pagination: '.swiper-pagination',
        paginationClickable: true,
        //loop: true,
        autoplay: SwpierPlayNum * 1000,
    });
    mySwiperWeb = WebUploader.create({

        // swf文件路径
        //        swf: BASE_URL + '/js/Uploader.swf',

        // 文件接收服务端。
        server: "Upload/Upload",

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: {
            id: '#SwpierImgAdd',
            multiple: true
        },
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/jpg,image/jpeg,image/png'
        },

        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        compress: null,//不启用压缩
        resize: false,//尺寸不改变

    });
    // 当有文件添加进来的时候
    mySwiperWeb.on('fileQueued', function (file) {
        var $li = $(
             '<div class="upload_warp_img_div" id="' + file.id + '">' +
                '<div class="upload_warp_img_div_top">' +
                    '<img src="/Content/webImgs/AntiFakePage/del.png" class="upload_warp_img_div_del" onclick="delSwpierImg(this)">' +
                '</div>' +
                '<div class="upload_warp_img_div_text">' +
                    '<img alt="null" class="uploadImg" />' +
               '</div>' +
            '</div>');
        $img = $li.find('.uploadImg')
        // $list为容器jQuery实例
        $('.upload_warp_img').append($li);

        // 创建缩略图
        // 如果为非图片文件，可以不用调用此方法。
        // thumbnailWidth x thumbnailHeight 为 100 x 100
        mySwiperWeb.makeThumb(file, function (error, src) {
            if (error) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }
            mySwiper.update();

        });

        mySwiperWeb.upload();

    });

    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
    mySwiperWeb.on('uploadSuccess', function (file, response) {
        //$.L.msgSuccess("操作成功");

        //console.log(response._raw.split('。')[1]);
        //console.log(file);
        $('#delivery_form').append(' <input type="hidden" name="UrlImg' + file.id.split("_")[2] + '" value="' + response._raw.split('。')[1] + '" />')
        var src = response._raw.substring(response._raw.indexOf("。") + 1)
        $img.attr('src', src);
        $swpierImg = '<img class="swiper-slide addSwpierImg" src="' + src + '" />'
       
        $("#_top_img").append($swpierImg)
        ShowDefaultImg($(".upload_warp_img_div").length)
    });

    // 文件上传失败，显示上传出错。
    mySwiperWeb.on('uploadError', function (file, r) {
        //console.log(file)
        var $li = $('#' + file.id),
                $error = $li.find('div.error');
        // 避免重复创建
        if (!$error.length) {
            $error = $('<div class="error" style="position: relative"></div>').appendTo($li);
        }
        $error.text('上传失败');
        $error.append($('<span class="glyphicon glyphicon-remove" style="position: absolute;right: 0;color: green;font-size: 18px"></span>'))
    });
    // 完成上传完了，成功或者失败，先删除进度条。
    mySwiperWeb.on('uploadComplete', function (file) {
        $('#' + file.id).find('.progress').remove();
    });



    //标题
    function ShowTitle(e) {
        $(".rightForm").hide();
        $("#AntiFakeTitle").show()
        $("input[name='TitleName']").focus();
        if (e && e.stopPropagation) {
            e.stopPropagation()
        } else {
            window.event.cancelBubble = true;
        }
    }
    function changeTitleName(_this) {
        $(".pageTitle").text($(_this).val())
    }

    //swiper
    function ShowTopSwpier(e) {
        $(".rightForm").hide();
        $("#AntiFakeSwiper").show();
        if (e && e.stopPropagation) {
            e.stopPropagation()
        } else {
            window.event.cancelBubble = true;
        }
    }

    function swpierAutoplayNum(_this) {
        SwpierPlayNum = $(_this).val();
        //console.log(parseFloat(SwpierPlayNum) * 1000)
        mySwiper.params.autoplay = parseFloat(SwpierPlayNum) * 1000;
    }

    function delSwpierImg(_this) {

        var index = $(".upload_warp_img_div_del").index($(_this))
        $(_this).parents('.upload_warp_img_div').remove();
        $(".addSwpierImg").eq(index).remove()
        ShowDefaultImg($(".upload_warp_img_div").length)

        mySwiper.update()
    }
    function ShowDefaultImg(nub) {
    
        if (nub > 0) {
            if ((".SwpierDefaultImage").length > 0) $(".SwpierDefaultImage").remove();

            if (nub == 1) {
                $("#btn1").hide();
                mySwiper.params.autoplay = 0;
            } else {
                $("#btn1").show();
                mySwiper.params.autoplay = parseInt(SwpierPlayNum) * 1000;

            }

        } else {
            $("#_top_img").append(SwpierDefaultImageHtml)
        }
        mySwiper.update();
    }


    function ChangeIconTitle(_this) {
        var index = $("input[name='IconTitleName']").index($(_this))
        $(".IconBox").eq(index).find("span").text($(_this).val())
    }


    //Input
    function ShowAntiFakeInp(e) {
        $(".rightForm").hide();
        $("#AntiFakeInp").show()
        if (e && e.stopPropagation) {
            e.stopPropagation()
        } else {
            window.event.cancelBubble = true;
        }
    }
    function ChangeInput(_this) {
        var index = $("input[name='FWCode']").index($(_this))
        switch (index) {
            case 0:
                var html = '<input class="form-control" id="CodeSearch" type="text"  placeholder="防伪码输入框" value=" ">'
                break;
            case 1:
                var html = ['<div id="CodeSearch" style="margin:0 -15px"><div class="col-xs-7 col-md-7" style="padding-right:0;">',
                            '<input class="form-control" type="text" readonly="readonly" placeholder="溯源码输入框" style="border-bottom-right-radius: 0px !important; border-top-right-radius: 0px !important;">',
                        '</div>',
                        '<div class="col-sm-5 col-md-5">',
                            '<span style="background: #EEE; text-align: center; padding: 0; border-bottom-right-radius: 4px; border-top-right-radius: 4px; display: flex; align-items: center; justify-content: space-around; line-height: 2.3em;margin-left:-15px;">4位验证码</span>',
                        '</div></div>'].join("")
                break;
        }
        $("#CodeSearch").after(html).remove()
    }

    //背景
    var BackgroundIndex = 0;
    var BackgroundSrc = "";
    function ChangeBackground() {
        $(".rightForm").hide();
        $("#AntiFakeBackground").show()
    }
    //function ChangeBackgroundImg(_this) {
    //    BackgroundIndex = $("input[name='BackgroundInp']").index($(_this))
    //    if (BackgroundIndex == 0) {
    //        $("#phone").css("background-image", "none")
    //        $("#BackgroundFile").hide()
    //    } else {
    //        $("#phone").css("background-image", "url(" + BackgroundSrc + ")")
    //        $("#BackgroundFile").show()
    //    }
    //}

    $(".titleX").on("click", function () {
        $(this).parents(".rightForm").hide()
    })

    $("#DragImgUiBox").draggable({ containment: "parent" }).resizable();;

    //富文本
    function ShowRichText(e) {
        $(".rightForm").hide();
        $("#RichTextRight").show();
        if (e && e.stopPropagation) {
            e.stopPropagation()
        } else {
            window.event.cancelBubble = true;
        }
    }
</script>

<script src="~/Scripts/MGJJS/AntiFake/CreateAntiFakePage2.js"></script>